<template>
  <div id="app">
    <el-drawer
  title="我是标题"
  :visible.sync="drawer"
  :with-header="false">
  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="createTime"
        label="日期"
        :formatter="formatDate"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cardStatusName"
        label="状态">
      </el-table-column>
    </el-table>
  </template>
</el-drawer>
    <div class="header">
      <h1 style="font-weight: bold">我的学生</h1>
    </div>

    <el-row style="margin: 20px 0">
      <el-col :span="4">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入学生姓名"
          suffix-icon="el-icon-search"
          @keyup.enter="getList"
        ></el-input>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="getList" style="margin-left: 20px"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1">
        <el-button @click="resetQuery" style="margin-left: 20px"
          >清空</el-button
        >

      </el-col>
    </el-row>

    <el-table :data="students" style="width: 100%">
      <el-table-column prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100">
        <template v-slot="scope">
          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
        </template>
      </el-table-column>
   
      
      <el-table-column
        prop="divisionName"
        label="部门"
        width="150"
      ></el-table-column>
      <el-table-column prop="phoneNumber"  label="手机号"></el-table-column>
      <el-table-column prop="description" label="简介"></el-table-column>
      <el-table-column  prop="description" label="操作">
        <template v-slot="scope">
          <el-button @click="getStudentClock(scope.row)" type="text" >
       查看打卡进度
        </el-button>

        </template>
        

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getStudent,getStudentClock } from "@/api/function/seeStudent/index"; // 确保路径正确

export default {
  data() {
    return {
      tableData:[],
      queryParams: {
        name: "",
        sex: "",
        divisionName: "",
        description: "",
      },
      students: [],
      loading: false,
      drawer: false,
    };
  },
  methods: {
    getStudentClock(row){
      this.drawer=true;
      getStudentClock({id:row.id}).then((res)=>{
      this.tableData=res.data
  
        for(let i=0;i<res.data.length;i++)
        switch(res.data[i].cardStatus){
        case 1:{
          this.tableData[i].cardStatusName="迟到"
          break;
        }
        case 2:{
          this.tableData[i].cardStatusName="缺勤"
          break;
        }
        case 0:{
          this.tableData[i].cardStatusName="早退"
          break;
        }
        case 3:{
          this.tableData[i].cardStatusName="打卡成功"
          break;
        }
        
        }
       
    
      })

    },
    formatDate(row, column, cellValue, index) {
      if (!cellValue) return "";
      const date = new Date(cellValue);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getList() {
      getStudent().then((res) => {
        this.students=res.data;
        console.log(res.data);
      });
    },
    resetQuery() {
      this.queryParams.name = "";
      this.getList(); // 重新获取学生列表
    },
  },
  created() {
    this.getList(); // 组件创建时获取学生列表
  },
};
</script>

<style>
#app {
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

h1 {
  font-size: 24px;
  margin: 0;
}

.el-row {
  margin-bottom: 20px;
}
</style>
